<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;border: solid 1px black;margin: 20px auto;font: 50px/200px "";text-align: center;}
        #btn{display: block;margin: 0 auto;font-size: 30px;width:200px;}
    </style>
</head>
<body>
    <div class="box">
        10
    </div>
    <input type="button" value="开始" id="btn">
</body>
<script>
    var obtn = document.querySelector("#btn")
    var obox = document.querySelector(".box")
    var t;

    // 1. 用于倒计时中-1的数字
    var num = obox.innerHTML;

    // 14. 提前将初始数字另存一份，用于复位
    var resetNum = obox.innerHTML;

    // 2. 用于区分按钮被点击时的状态
    var i = 0;

    // 点击事件
    obtn.onclick = function(){
        // 3. 判断当前按钮的状态，选择执行不同的功能
        if(i === 0){
            // 开始功能
            start();
            // 修改按钮状态为下次的功能状态：暂停
            i = 1;
        }else if(i === 1){
            // 暂停功能
            stop();
            // 修改按钮状态为下次的功能状态：开始
            i = 0;
        }else{
            // 重置功能
            reset();
            // 修改按钮状态为下次的功能状态：开始
            i = 0;
        }
    }

    // 4. 开始倒计时的功能
    function start(){
        // 5. 为了性能，开启计时器之前先清除计时器
        clearInterval(t);
        // 6. 开启计时器
        t = setInterval(function(){
            // 7. 倒计时
            num--;
            // 11. 判断是否到倒计时的终点了
            if(num === 0){
                // 清除计时器
                clearInterval(t);
                // 设置提示语
                num = "结束了"
                // 12. 修改按钮状态为下次的功能状态：复位
                i = 2;
                obtn.value = "复位";
            }
            // 8. 将倒计时的数字设置到容器
            obox.innerHTML = num;
        },1000);
        obtn.value = "暂停";
    }

    // 9. 暂停倒计时的功能
    function stop(){
        // 10. 利用清除计时器，实现暂停功能
        clearInterval(t);
        obtn.value = "继续";
    }
    
    // 13. 复位倒计时的功能
    function reset(){
        // 15. 将初始数字设置给倒计时数字
        num = resetNum;
        // 16. 将初始数字设置给倒计时容器
        obox.innerHTML = resetNum;
        obtn.value = "开始";
    }
    
</script>
</html>